import React, { FC } from 'react'
import { Pie, PieChart, ResponsiveContainer, Tooltip, Cell } from 'recharts'
import { STAT_COLORS } from '../../../../constant'
const data01 = [
    { name: 'Group A', value: 400 },
    { name: 'Group B', value: 300 },
    { name: 'Group C', value: 300 },
    { name: 'Group D', value: 200 },
    { name: 'Group E', value: 278 },
    { name: 'Group F', value: 189 },
]
const PieDemo: FC = () => {
    return (
        <div style={{ width: '500px', height: '400px' }}>
            <ResponsiveContainer width="100%" height="100%">
                <PieChart width={400} height={400}>
                    <Pie
                        dataKey="value"
                        isAnimationActive={false}
                        data={data01}
                        cx="40%" // X轴偏移量
                        cy="50%" // Y轴偏移量
                        outerRadius={80} // 饼图直径
                        fill="#8884d8" // 饼图颜色
                        label={i => `${i.name}:${i.value}`} // 饼图外层标签
                    >
                        {data01.map((i, index) => {
                            return <Cell key={index} fill={STAT_COLORS[index]}></Cell>
                        })}
                    </Pie>
                    <Tooltip />
                </PieChart>
            </ResponsiveContainer>
        </div>
    )
}
export default PieDemo
